<template>
  <router-layout>
    <div v-if="organiza=='error' || !imagesLength" class="detail-box">
      <div class="list-data van-hairline--top-bottom">
        <div class="content-box fn-clear">
          <div class="img-box">
            <img :src="dataInfo.file_path" alt>
          </div>
          <div class="text-box">
            <p>{{ dataInfo.organization_name }}</p>
            <div v-if="dataInfo.director" class="other-text">
              <span class="text-content">负责人: {{ dataInfo.director }}</span>
              <span class="text-content">电话: {{ dataInfo.telephone }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-container-box">
        <p class="detail-text van-hairline--bottom">详情信息</p>
        <div class="introduce ude-box" v-html="dataInfo.organization_desc"></div>
      </div>
    </div>
    <div v-if="organiza=='success' || imagesLength" class="home">
      <div class="swipe-box">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <div class="img-box">
              <img style="width:100%" :src="image.banner_path">
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="list-box">
        <div class="list van-hairline--bottom" v-for="(item, index) in dataList" :key="index" @click="openLink(item)" >
          <div class="content-box">
            <div class="img-box">
              <img :src="item.banner_bath" width="100%" height="100%" alt>
            </div>
            <div class="text-box">
              <p>{{ item.model_name }}</p>
            </div>
          </div>
          <div class="icon-box">
            <van-icon name="arrow"/>
          </div>
        </div>
      </div>
    </div>
  </router-layout>
</template>

<script>
import {
  organization_listAll,
  organization_listBanner
} from "@/api/organization";
export default {
  name: "component_name",
  data() {
    return {
      dataList: [],
      isShow: false,
      listQuery: {
        organization_id: this.$route.query.id - 0,
        company_id: localStorage.getItem("companyId") - 0
      },
      images: [],
      organiza: '',
      imagesLength: null,
      dataInfo:{}
    };
  },
  methods: {
    openLink(item) {
      if (item.url) {
        window.location.href = item.url;
      }else{
          this.$router.push({
              path:"/UnionNews",
              query:{id:item.id,organization_id:item.organization_id}
          })
      }
    },
    async initList() {
      let res = await organization_listAll(this.listQuery);
      if (res.data.status == 100) {
        this.images = res.data.data.rows;
        this.imagesLength =  res.data.data.rows.length
      }
    },
    async bannerList() {
      try {
        let res = await organization_listBanner(this.listQuery);
        if (res.data.status == 100) {
          this.dataList = res.data.data.rows;
          this.organiza = 'success'
        }
      } catch (error) {
        if (error.data.status == 101) {
          this.organiza = 'error'
        }
      }

    }
  },
  created() {
    this.bannerList();
    this.initList();
    this.dataInfo = this.$route.query.content;
  }
};
</script>
<style lang="scss" scoped>
.swipe-box {
  .img-box {
    width: 100%;
    overflow: hidden;
  }
}
.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  .content-box {
    display: flex;
    align-items: center;
  }
  .img-box {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: 0px 0px 1px 1px #ccc;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .text-box {
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  .icon-box {
    padding-top: 12px;
    font-size: 22px;
  }
  .other-text {
    padding-top: 6px;
    font-size: 14px;
    color: #bbb;
  }
}
.detail-box {
  .list-data {
    // padding: 15px;
    .content-box{
      padding: 15px;
    }
    .img-box {
      width: 60px;
      height: 60px;
      // border-radius: 50%;
      overflow: hidden;
      box-shadow: 0px 0px 1px 1px #ccc;
      float: left;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text-box {
      padding-left: 15px;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .other-text {
      padding-top: 10px;
      font-size: 12px;
    }
    .text-content {
      margin-right: 10px;
    }
  }
  .content-container-box {
    .detail-text {
      padding: 10px 15px;
      font-size: 16px;
    }
    .introduce {
      padding: 10px 15px;
    }
  }
}
</style>
